<template>
  <div>

    <el-card class="content scrollbar">
      <div class="tr mb20">
        <el-button size="mini" type="primary" @click="detailBtn('新增大类',{})">新增大类
        </el-button>
      </div>
      <el-table :data="list" size="small" height="68vh" row-key="id" :tree-props="{children: 'children'}"
        :header-cell-style="$style.rowClass" :cell-style="$style.cellStyle">
        <ElTableColumn label="分类编码" prop="drugCategoryCode" />
        <ElTableColumn label="分类名称" prop="drugCategoryName" />
        <ElTableColumn label="三方编码" prop="thirdCode" />
        <ElTableColumn label="创建方式" prop="drugTypeName" />
        <ElTableColumn label="创建日期" width="200" prop="createTime" />
        <ElTableColumn label="创建人" prop="createBy" />
        <ElTableColumn label="操作" width="250" fixed="right">
          <template slot-scope="{ row }">
            <el-button type="primary" size="mini" @click="detailBtn('新增子类',row)">新增子类</el-button>
            <el-button type="primary" size="mini" @click="detailBtn('修改',row)">修改</el-button>
            <el-button size="mini" @click="hint('del','此操作将永久删除该分类',row)">删除</el-button>
          </template>
        </ElTableColumn>
      </el-table>
      <pagination class="page tc mt10" :total="page.total" :page.sync="page.pageNum" :limit.sync="page.pageSize"
        @pagination="getList" />
      <el-dialog :title="dialogTit" :close-on-click-modal="false" :visible.sync="dialogVisible" width="30%">
        <el-form ref="detail" :model="detail" class="ml20" :inline="true" size="mini" label-position="right"
          label-width="100px">
          <el-form-item v-if="dialogTit=='新增子类'" label="大类名称">
            <el-input v-model="detail.parentDrugCategoryName" disabled class="w300" />
          </el-form-item>
          <el-form-item v-if="dialogTit=='修改'" label="分类编码">
            <el-input v-model="detail.drugCategoryCode" disabled class="w300" />
          </el-form-item>
          <el-form-item v-if="dialogTit!='新增子类'" label="分类名称">
            <el-input v-model="detail.parentDrugCategoryName" class="w300" maxlength="10" show-word-limit
              placeholder="请输入分类名称" />
          </el-form-item>
          <el-form-item v-if="dialogTit=='新增子类'" label="子类名称">
            <el-input v-model="detail.drugCategoryName" class="w300" maxlength="10" show-word-limit
              placeholder="请输入子类名称" />
          </el-form-item>
          <el-form-item v-if="dialogTit=='新增子类' ||dialogTit=='修改'" label="三方编码">
            <el-input v-model="detail.thirdCategoryCode" class="w300" maxlength="10" show-word-limit
              placeholder="请输入三方编码" />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
          <el-button size="mini" type="primary" @click="createDetail('detail')">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>

// import SidebarItem from './SidebarItem';
import pagination from '@/components/Pagination';
import { drugcategoryList, drugcategoryAdd, drugcategoryUpdate, drugcategoryDelete } from '@/api/drugs';
// import { mapGetters } from 'vuex';
class Page {
  total = 0;
  pageNum = 1;
  pageSize = 30;
}

class Options {
  options = [
    { id: 1, name: '选项一' },
    { id: 2, name: '选项二' },
    { id: 3, name: '选项三' },
    { id: 4, name: '选项四' }
  ];
}
class Detail {
  drugCategoryCode = '';
  parentDrugCategoryName = '';
  parentDrugCategoryCode = '';
  id = '';
  drugCategoryName = '';
  thirdCategoryCode = '';
}
export default {
  components: {
    pagination
  },
  data () {
    return {
      options: new Options(), // 选项
      page: new Page(), // 分页
      detail: new Detail(), // 提交信息
      dialogVisible: false, // 添加编辑
      dialogTit: '', // 弹窗名称
      list: [] // 列表
    };
  },

  watch: {
    'detail.thirdCategoryCode' (newValue, oldValue) {
      console.log(newValue);
      this.detail.thirdCategoryCode = newValue.replace(/[\u4e00-\u9fa5/\s+/]|[^a-zA-Z0-9\u4E00-\u9FA5]/g, '');
    }
  },
  computed: {
    // ...mapGetters(['permission'])
  },
  mounted () {
  },
  methods: {
    async getList () {
      try {
        const { data } = await drugcategoryList({
          pageNum: this.page.pageNum,
          pageSize: this.page.pageSize
        });
        // console.log(data);
        this.list = data.list;
        this.page.total = data.total;
      } catch (e) {
        this.page.total = 0;
        this.list = [];
      }
    },
    // 按钮
    detailBtn (nameType, row) {
      this.dialogVisible = true;
      this.dialogTit = nameType;
      this.detail = new Detail();
      console.log(nameType, row);
      this.detail.parentDrugCategoryCode = '0';
      if (nameType == '修改') {
        this.detail.id = row.id;
        // this.detail.parentDrugCategoryCode = row.parentDrugCategoryCode;
        // this.detail.thirdCategoryCode = row.thirdCategoryCode;
        this.detail.parentDrugCategoryName = row.drugCategoryName;
        this.detail.drugCategoryCode = row.drugCategoryCode;
        this.detail.thirdCategoryCode = row.thirdCode ? row.thirdCode : '';
      } else if (nameType == '新增子类') {
        // this.detail.id = row.id;
        this.detail.parentDrugCategoryName = row.drugCategoryName;
        this.detail.parentDrugCategoryCode = row.drugCategoryCode;
        // this.detail.drugCategoryName = '';
      }
    },

    // 提交
    createDetail (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let hintText = this.dialogTit;
          this.hint('create', hintText);
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 确认提示
    hint (status, hintText, row) {
      this.$confirm(`${hintText}, 是否确认?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          switch (status) {
            case 'del':
              this.delRow(row);
              break;
            case 'create':
              this.submitBrand(row);
              break;
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
    },
    // 删除
    async delRow (row) {
      const res = await drugcategoryDelete({
        id: row.id
      });
      this.$notification('操作成功', 'success', res.msg);
      this.getList();
    },
    // 提交接口
    async submitBrand () {
      console.log(this.detail);
      if (this.dialogTit == '修改') {
        this.detail.drugCategoryName = this.detail.parentDrugCategoryName;
      }
      const res = this.dialogTit == '修改' ? await drugcategoryUpdate({
        ...this.detail
      }) : await drugcategoryAdd({
        ...this.detail
      });
      this.$notification('操作成功', 'success', res.msg);
      this.dialogVisible = false;
      this.getList();
      // console.log(this.dialogTit);
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  // height: calc(100% - 56px);
  // overflow-y: hidden;
  height: 82vh;
  ::v-deep img {
    width: 50px;
    border-radius: 4px;
    margin-top: 6px;
  }
}
.content:hover {
  overflow-y: auto;
}
</style>
